<template>
  <div class="InA-container">
    <div class="top">
      <div class="header">
        <span class="title"> 收入方式占比</span>
        <el-select placeholder="近15天">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in data"
            :key="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div :body-style="{ paddingTop: '10px' }">
      <div class="container" ref="target"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "echarts";

//定义数据源
const data = ref([
  { value: "近一周", label: "近一周" },
  { value: "近15天", label: "近15天" },
  { value: "近30天", label: "近30天" },
  { value: "自定义", label: "自定义" },
]);

let mChart;
const target = ref(null);

onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});

const renderChart = () => {
  const options = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: ["支付宝", "现金支付", "银联支付", "微信支付"],
      orient: "vertical", //设置图例为竖直
      x: "left",
      y: "top",
      padding: [0, 0, 0, 0],
    },
    series: [
      {
        type: "pie",
        name: "收入方式占比",
        radius: "55%",
        data: [
          {
            value: 4664,
            name: "支付宝",
          },
          {
            value: 1000,
            name: "现金支付",
          },
          {
            value: 896,
            name: "银联支付",
          },
          {
            value: 667,
            name: "微信支付",
          },
        ],
        color: ["#89c3eb", "#98d98e", "#00a3af", "#84a2d4"],
      },
    ],
  };
  mChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.InA-container {
  width: 100%;
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  .top {
    border-bottom: 1px solid #e6ebf5;
    width: 100%;
    padding: 18px 20px;
    box-sizing: border-box;
    .header {
      .title {
        font-size: 14px;
        margin-right: 10px;
      }
      .el-select {
        width: 100px;
      }
    }
  }
  .container {
    border-top: 1px solid #e6ebf5;
    height: 300px;
    padding: 20px;
  }
}
</style>
